$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")

// 保存点击的那个商品数据的id
    const id=(location.search.split("=")[1]);



    // // 图片数据
    // const imgs = [{
    //     m:"./images/oneplus/2.png",
    //     l:"./images/oneplus/2.png",
    // },{
    //     m:"./images/oneplus/3.png",
    //     l:"./images/oneplus/3.png",
    // },{
    //     m:"./images/oneplus/4.png",
    //     l:"./images/oneplus/4.png",
    // }];
    // // 点击小图切换中图和大图
    // function Tab(){
    //     this.li = document.querySelectorAll(".cont li");
    //     this.sImg = document.querySelector(".small_box img");
    //     this.bImg = document.querySelector(".big_box img");
    //     this.data = imgs;
    //     this.index = 0;
    //     this.addEvent();
    // }
    // Tab.prototype.addEvent = function(){
    //     const that = this;
    //     for(let i=0;i<this.li.length;i++){
    //         this.li[i].xuhao = i;
    //         this.li[i].onclick = function(){
    //             that.hide();
    //             that.getIndex(this);
    //         }
    //     }
    // }
    // Tab.prototype.hide = function(){
    //     this.li[this.index].className = "";
    // }
    // Tab.prototype.getIndex = function(now){
    //     this.index = now.xuhao;
    //     this.show();
    // }
    // Tab.prototype.show = function(){
    //     this.li[this.index].className = "active";
    //     this.sImg.src = this.data[this.index].m;
    //     this.bImg.src = this.data[this.index].l;
    // }
    






    // 放大镜功能
    class Magnifier{
        constructor(){
            this.sBox = document.querySelector(".small_box");
            this.sImg = document.querySelector(".small_box img");
            this.sSpan = document.querySelector(".small_box span");
            this.bBox = document.querySelector(".big_box");
            this.bImg = document.querySelector(".big_box img");
            this.addEvent();
        }
        move(aaa){
            let l = aaa.x - this.sSpan.offsetWidth/2;
            let t = aaa.y - this.sSpan.offsetHeight/2;
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init(){
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";7
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        }
        addEvent(){
            var that = this;
            this.sBox.onmouseenter = function(){
                that.show();
            }
            this.sBox.onmouseleave = function(){
                that.hide();
            }
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                const pos = {
                    x:e.offsetX,
                    y:e.offsetY
                };
                that.move(pos);
            }

            for(let i=0;i<this.imgs.length;i++){
                this.imgs[i].onclick = function(){
                    this.bImg.src = this.sImg.src = this.imgs[i].src
                }

            }
        }
        show(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    

    // 选项点击效果
    class tabList{
        constructor(){
            this.mSpan = document.getElementById('model').getElementsByTagName('span');
            this.cSpan = document.getElementById('color').getElementsByTagName('span');
            this.rSpan = document.getElementById('rom').getElementsByTagName('span');
            this.bSpan = document.getElementById('banben').getElementsByTagName('span');
            this.aSpan = document.getElementsByTagName('span');
            this.oModel = document.getElementById('model');
            this.oRom = document.getElementById('rom');
            this.oPrice = document.getElementById('price');
            this.mSpan[0].className = 'on';
            this.cSpan[0].className = 'on';
            this.rSpan[0].className = 'on';
            this.bSpan[0].className = 'on';
            this.addEvent()
        }


        addEvent(){
            for (var i=0;i<this.aSpan.length;i++ ){
                
                this.aSpan[i].onclick = function(){
                    var siblings = this.parentNode.children;
                    for (var j=0;j<siblings.length;j++ )
                    {
                        siblings[j].className = '';
                    }
                    this.className = 'on';
                    
                    if ( this.parentNode == this.oModel || this.parentNode == this.oRom )
                    {
                        price();
                    }
                };
            };
        }
            price(){
                var p1 = 0;
                var p2 = 0;
                for (var i=0;i<this.mSpan.length;i++ )
                {
                    if ( this.mSpan[i].className == 'on' )
                    {
                        // p1 = i?3299:2199;
                        // break;

                        switch ( i )
                        {
                            case 0:
                                p1 = 2199;
                                break;
                            case 1:
                                p1 = 2299;
                                break;
                            case 2:
                                p1 = 2399;
                                break;
                            case 3:
                                p1 = 2499;
                                break;
                            case 4:
                                p1 = 3599;
                                break;
                        }
                    };
                };
                for (var i=0;i<this.rSpan.length;i++ )
                {
                    if ( this.rSpan[i].className == 'on' )
                    {
                        switch ( i )
                        {
                            case 0:
                                p2 = 0;
                                break;
                            case 1:
                                p2 = 400;
                                break;
                            case 2:
                                p2 = 800;
                                break;
                        }
                    }
                };
                oPrice.innerHTML = p1+p2;
            };
    }



    class details{ 
        constructor(){
            this.url = "http://localhost:3000/api";
            this.shop = document.querySelector(".shop");
            this.lie =  document.querySelector(".lie");
            console.log(this.lie)
    
            // 1. 读取本地存储中的数据
            this.getLocal();
            // 2. 读取后端的商品数据
            this.load();
        }
        getLocal(){
            // 读本地数据
            this.goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
        }
        load(){
            // 开启ajax读后端数据
            ajax({
                url:this.url,
                data:{
                    type:"getGoods"
                },
                success:res=>{
                    this.res = JSON.parse(res);
                    // console.log(this.res);

                    let i=0;
                    this.res.some((val,idx)=>{
                        i = idx;
                        return val.index === id
                    })
                
                    // console.log(this.res[i])
                    var bbb=this.res[i];
                    // console.log(bbb);
                    this.render(bbb);
                }
            })
                    // 3. 渲染页面
                // this.render(bbb);
        }
        render(aaa){
            console.log(aaa)
            var str="";
            var ccc="";
            aaa.imgs.forEach(val=>{
                // console.log(aaa.imgs)
                ccc+=`<li><img src="${val}" alt=""></li>`
                // console.log(ccc)
            })

            str+=`
            <div class="glass">
            <div class="cont glass_left">
                <div class="small_box">
                    <img src="${aaa.img1}" alt="">
                    <span></span>
                    <em></em>
                </div>
                <ul>
                    <a href="" id="il"><img src="./images/left.jpg" alt="" ></a>
                    <div calss="lie"></div>
                    <a href="" id="ir"><img src="./images/right.jpg" alt=""></a>
                </ul>
            </div>
            <div class="big_box">
                <img src="${aaa.img1}" alt="">
            </div>
    

    
            <div class="glass_right">
                <h2>24期免息【 当天发货 】一加9 Pro 5G手机新款一加9游戏手机官方旗舰店正品 高通骁龙870 新品一加9Pro</h2>
                <p>当天发货 24期免息 送影视会员</p>
                <div class="price">
                    <img src="./images/details/1.png" alt="" class="bg1">
                    <img src="./images/details/2.png" alt="" class="bg2">
                    <span class="huodong">此商品在活动中，亲尽快购买</span>
                    <div class="money">
                        <span class="span1">价格</span>
                        <span class="span2">￥</span>
                        <span class="span3">2199.00~4399.00</span>
                    </div>
                </div>
    
                <div class="select">
    
                    <div id="wrap">
                        <div id="top">
                            <p id='model'>
                                <font>套餐类型</font>
                                <span>官方标配</span>
                                <span>套餐一</span>
                                <span>套餐二</span>
                                <span>套餐三</span>
                                <span>套餐四</span>
                            </p>
                            <p id='color'>
                                <font>机身颜色</font>
                                <span>蓝屿</span>
                                <span>黑岛</span>
                                <span>深空灰色</span>
                            </p>
                            <p id='rom'>
                                <font>储存容量</font>
                                <span>8+128GB</span>
                                <span>8+256GB</span>
                                <span>12+256GB</span>
                            </p>
                            <p id='banben'>
                                <font>版本类型</font>
                                <span>公开版</span>
                                <span>移动赠费版</span>
                                <span>联通合约版</span>
                            </p>
                        </div>
                        <div id="bottom">
                            <p>价格： <font>￥ <span id='price'>2199</span>.00</font> <a href=''><i>移动赠费版</i>或<i>联通合约版</i>购机价格计算请点击这里>.< </a></p>
                            <button class="btn1">加入购物车</button>
                            <button class="btn2">立即购买</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            `
         // 将拼接好的页面结构，填充到页面
            this.shop.innerHTML = str;
            this.lie.innerHTML = ccc;
            new Magnifier();
            new tabList();
        }


    }
    
    new details();
  




